<template>
  <div>
    <div class="header">500</div>
    <div class="center"> Internal Server Error.</div>
    <router-link to="/main/dispatching/list">
      <button class="button" @click="hreftwo">返回首页</button>
    </router-link>
    <div class="footer">抱歉，您访问的页面不见了！休息一下！</div>
  </div>
</template>

<script>
  export default {
    name: "500",
    data(){
      return{}
    },
    methods:{
      hreftwo(){
        this.$router.push({path:'/main/dispatching/list'})
      }
    }
  }
</script>

<style scoped>
  .header {
    position: absolute;
    top: 24%;
    left: 50%;
    margin-left: -150px;
    background-image: -webkit-linear-gradient(left, #FFCCFF, #CACACA 10%, #C4E7FD 20%, #CACACA 30%, #C4E7FD 40%, #CC00FF 80%, #66FFFF 70%, #FFCCFF);
    -webkit-text-fill-color: transparent; /* 将字体设置成透明色 */
    -webkit-background-clip: text; /* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
    -webkit-background-size: 200% 100%;
    font-size: 100px;
  }

  .center {
    position: absolute;
    top: 40%;
    left: 37%;
    font-size: 40px;
    font-style: normal;
    color: #C1E4FA;
  }

  .footer {
    position: absolute;
    bottom: 30%;
    left: 34%;
    font-size: 30px;
    color: #666D75;
  }

  .button {
    position: absolute;
    top: 52%;
    left: 42%;
    width: 150px;
    height: 50px;
    font-size: 20px;
    color: #AFE7FF;
    background: #ffffff;
    border: 1px solid #AFE7FF;
    border-radius: 12px;
    cursor: pointer;
  }
</style>
